﻿@model SarahShop.Models.IndexModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- start slider -->
<div class="slider">
    <!---start-image-slider---->
    <div class="image-slider">
        <div class="wrapper">
            <div id="ei-slider" class="ei-slider">
                <ul class="ei-slider-large">
                    @for (int i = 0; i < Model.lstSlider.Count(); i++)
                    {
                        <li>
                            <img src="~/Content/images/slider/@Model.lstSlider[i].Image" alt="image06" />
                            <div class="ei-title">
                                <h3 class="btn">$@Model.lstSlider[i].Pirce.ToString("N0")</h3>
                                <h2>@Model.lstSlider[i].MainTitle
                                    <br>
                                    @Model.lstSlider[i].SubTitile</h2>
                                <h3 class="active">@Model.lstSlider[i].Text1<br>
                                    @Model.lstSlider[i].Text2
                                </h3>
                                <h3>
                                    <a class="ei_icons" href="details.html">
                                        <img src="~/Content/images/icon_1.png" alt=""></a>
                                    <a class="ei_icons" href="details.html">
                                        <img src="~/Content/images/icon_2.png" alt=""></a>
                                    <a class="ei_icons" href="details.html">
                                        <img src="~/Content/images/icon_3.png" alt=""></a>
                                    <a class="ei_icons" href="details.html">
                                        <img src="~/Content/images/icon_4.png" alt=""></a>
                                </h3>
                            </div>
                        </li>
                    }
                </ul>

                <!-- ei-slider-large -->
                <ul class="ei-slider-thumbs">

                    <li class="ei-slider-element">Current</li>
                    @for (int i = 0; i < Model.lstSlider.Count(); i++)
                    {
                        string cls = i == 1 ? "hide" : i == 2 ? "hide1" : "";
                        <li class ="@cls">
                            <a href="#">
                                <span class="active">@Model.lstSlider[i].MainTitle</span>
                                <p>@Model.lstSlider[i].SubTitile</p>
                            </a>
                            <img src="~/Content/images/slider/@Model.lstSlider[i].Image" alt="thumb01" />
                        </li>
                    }
                </ul>
                <!-- ei-slider-thumbs -->
            </div>
            <!-- ei-slider -->
        </div>
        <!-- wrapper -->
    </div>
    <!---End-image-slider---->
</div>
<!-- start image1_of_3 -->
<div class="top_bg">
    <div class="wrap">
        <div class="main1">
            <div class="image1_of_3">
                <img src="~/Content/images/img1.jpg" alt="" />
                <a href="details.html"><span class="tag">on sale</span></a>
            </div>
            <div class="image1_of_3">
                <img src="~/Content/images/img2.jpg" alt="" />
                <a href="details.html"><span class="tag">special offers</span></a>
            </div>
            <div class="image1_of_3">
                <img src="~/Content/images/img3.jpg" alt="" />
                <a href="details.html"><span class="tag">must have</span></a>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<!-- start main -->
<div class="main_bg">
    <div class="wrap">
        <div class="main">

            <div class="top_main">
                <h2>Sản phẩm</h2>
                <div class="clear"></div>
            </div>
            <!-- start grids_of_3 -->
            @{
                int times = Model.lstProduct.Count() / 3 + 1;
                int count = 0;
                for (int i = 0; i < times; i++)
                {
                    <div class="grids_of_3">
                    @for(int j = 0; j < 3; j++)
                    {
                        
                        if(count < Model.lstProduct.Count())
                        {
                            string text = Model.lstProduct[count].Status == 1 ? "New" : Model.lstProduct[count].Status == 2 ? "Sale" : "";
                            string cls = text == "Sale" ? "price1 bg" : text == "New" ? "price1 bg1" : "";
                        
                            <div class="grid1_of_3">
                                <a href="/Home/Details?pcode=@Model.lstProduct[count].Code">
                                    <img src="~/Content/images/source/@Model.lstProduct[count].Image" alt="" />
                                    <h3>@Model.lstProduct[count].Name</h3>
                                    <span class="price">$@Model.lstProduct[count].Price.ToString("N0")</span>
                                    <span class="@cls">@text</span>
                                </a>
                            </div>
                            count++;
                        }
                        
                    }
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
                }
                
            }
            <div class="clear"></div>
            </div>

            <div class="clear"></div>
            <!-- start grids_of_2 -->
            <div class="grids_of_2">
                <div class="grid1_of_2">
                    <div class="span1_of_2">
                        <h2>Giao hàng tận nơi</h2>
                        <p>Lorem Ipsum is simply dummy  typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </div>
                    <div class="span1_of_2">
                        <h2>Khuyến mãi lớn</h2>
                        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using [...]</p>
                    </div>
                </div>
                <div class="grid1_of_2 bg">
                    <h2>Chính sách</h2>
                    <div class="grid_date">
                        <div class="date1">
                            <h4>01</h4>
                        </div>
                        <div class="date_text">
                            <h4><a href="#">Đổi trả hàng</a></h4>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="grid_date">
                        <div class="date1">
                            <h4>02</h4>
                        </div>
                        <div class="date_text">
                            <h4><a href="#">Quà tặng hấp dẫn</a></h4>
                            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from </p>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>
<!-- start footer -->
